<template>
  <div>
    <el-header class="me-area">
      <el-row class="me-header">

        <div id="background"></div>
        <el-col :span="4" class="me-header-left">
          <router-link to="/" class="me-title">
            <img src="../assets/img/logo.png"/>
          </router-link>
        </el-col>

        <el-col v-if="!simple" :span="14">
          <el-menu :router=true menu-trigger="click" active-text-color="#5FB878" :default-active="activeIndex"
                   mode="horizontal">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/category/all">文章分类</el-menu-item>
            <el-menu-item index="/tag/all">标签</el-menu-item>
            <el-menu-item index="/archives">文章归档</el-menu-item>

            <el-col :span="4" :offset="4">
              <el-menu-item index="/write"><i class="el-icon-edit"></i>写文章</el-menu-item>
            </el-col>

          </el-menu>
        </el-col>

        <template v-else>
          <slot></slot>
        </template>

        <el-col :span="5">
          <el-menu :router=true menu-trigger="click" mode="horizontal" active-text-color="#5FB878">
            <el-menu-item><!--index="/adminLogin"-->
              <el-button type="text" @click="isLogin">管理员登录</el-button>
            </el-menu-item>
            <el-menu-item>
              <el-button type="text" @click="swich">设置爱好</el-button>
            </el-menu-item>
            <template v-if="!user.login">

              <el-menu-item index="/login">
                <el-button type="text">登录</el-button>
              </el-menu-item>
              <el-menu-item index="/register">
                <el-button type="text">注册</el-button>
              </el-menu-item>
            </template>

            <template v-else>
              <el-submenu index>
                <template slot="title">
                  <img class="me-header-picture" :src="user.avatar"/>
                </template>
                <el-row>
                  <el-menu-item index @click="getUserInfo"><i class="el-icon-back"></i>修改密码</el-menu-item>
                </el-row>
                <el-row>
                  <el-menu-item index @click="logout"><i class="el-icon-back"></i>退出</el-menu-item>
                </el-row>
              </el-submenu>
            </template>
          </el-menu>
        </el-col>

      </el-row>

    </el-header>
    <div>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="个性昵称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="最喜欢的动漫" :label-width="formLabelWidth">
            <el-input v-model="form.catoon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="最喜欢的女孩儿" :label-width="formLabelWidth">
            <el-input v-model="form.girl" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="最喜欢的游戏" :label-width="formLabelWidth">
            <el-input v-model="form.game" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="最喜欢的颜色" :label-width="formLabelWidth">
            <el-input v-model="form.color" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveHobby">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog
        title="修改密码"
        :visible.sync="updatePwdVisible"
        width="30%">
        <el-form :inline="true" :model="newUser" label-width="180px">
          <el-row>
            <el-form-item class="text" label="账号:">
              <el-input
                placeholder="请输入您要修改的账号"
                v-model="newUser.account"
                size="small"
                clearable>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="text" label="昵称:">
              <el-input
                placeholder="请输入您要修改的昵称"
                v-model="newUser.nickName"
                size="small"
                clearable>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="text" label="密码:">
              <el-input
                placeholder="请输入您要修改的密码"
                v-model="newUser.password"
                size="small"
                clearable>
              </el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="updatePwdVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePwd">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {setHobby, getHobby} from '@/api/article'
import {getToken, getUserName} from '@/request/token'
import {getUserInfo, updatePwd} from '@/api/login'
import {Message} from "element-ui";

export default {
  name: 'BaseHeader',
  inject: ['reload'],
  props: {
    activeIndex: String,
    simple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      token: localStorage.token,
      newUser: {
        id: '',
        nickName: '',
        account: '',
        password: '',
      },
      updatePwdVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        catoon: '',
        game: '',
        girl: '',
        color: '',
      },
      formLabelWidth: '120px',
    }
  },
  computed: {
    user() {
      let login = this.$store.state.account.length != 0
      let avatar = this.$store.state.avatar
      return {
        login, avatar
      }
    }
  },
  methods: {
    isLogin() {
      console.log(this.$store.state)
      if (this.token != undefined) {
        Message({
          type: 'warning',
          showClose: true,
          message: '请先退出普通登录状态呦~~~~'
        })
      } else {
        this.$router.push({path: '/adminLogin'})
      }
    },
    updatePwd() {
      console.log(this.newUser)
      updatePwd(this.newUser).then(resp => {
        if (resp.success) {
          this.$message({
            type: 'success',
            message: '修改成功,并请重新登录',
          });
          this.updatePwdVisible = false;
          this.logout()
        } else {
          this.$message({
            type: 'error',
            message: resp.msg,
          });
        }
      })

    },
    getUserInfo() {
      this.updatePwdVisible = true;
      this.newUser.id = this.$store.state.id;
      this.newUser.account = this.$store.state.account;
      this.newUser.nickName = this.$store.state.name;
    },
    logout() {
      let that = this
      this.$store.dispatch('logout').then(() => {
        this.reload()
      }).catch((error) => {
        if (error !== 'error') {
          that.$message({message: error, type: 'error', showClose: true});
        }
      })
    },

    saveHobby() {
      if (typeof (this.$store.state.token) == "undefined") {
        Message({
          type: 'warning',
          showClose: true,
          message: '请先登录哦'
        })
      } else {
        setHobby(this.form, this.$store.state.token).then(resp => {
          this.reload()
        })
        this.dialogFormVisible = false
      }

    },
    swich() {
      if (typeof (this.$store.state.token) == "undefined") {
        Message({
          type: 'warning',
          showClose: true,
          message: '请先登录哦'
        })
      } else {
        getHobby(this.$store.state.token).then(resp => {
          this.form = resp.data;
        })
        this.dialogFormVisible = true
      }

    },

  }
}
</script>

<style>

.el-header {
  position: fixed;
  z-index: 1024;
  min-width: 100%;
  box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
}

.me-title {
  margin-top: 10px;
  font-size: 24px;

}

.me-header-left {
  margin-top: 10px;
}

.me-title img {
  max-height: 2.4rem;
  max-width: 100%;
}

.me-header-picture {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #5fb878;
}
</style>
